<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet"
	href="http://code.jquery.com/ui/1.11.2/themes/cupertino/jquery-ui.css" />

<script src='https://www.google.com/jsapi'></script>
<script src="http://maps.googleapis.com/maps/api/js?libraries=visualization"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
 <script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>

<script src="/js/icons.js"></script>

<script>
function drawMap(){
		var geocoder, mapOptions;
		var map, pointarray, heatmap;
	    var categories = [] ;			
	
	    console.log ("val0 " + jQuery('#val0').is(':checked'));	   	    
	    console.log("priority selected is " + jQuery('#priority').val());
	
		var lat = 38.3869906;
		var lng = 27.1597811;
		latlng = new google.maps.LatLng(lat, lng);
		pointarray = [];
		userData = [];

		mapOptions = {
		  zoom : 13,
		  center : latlng,
	      mapTypeId : google.maps.MapTypeId.SATELLITE
		};		

		var categoriesURL= "/json/categories.json";       
	         
	    jQuery.getJSON( categoriesURL, function( json ) {      

	      jQuery.each(json, function(key, val) {          
	        		  categories[val.categoryId]=val.name;   	         		   
	       });
	                    	  
	     }).fail(function( jqxhr, textStatus, error ) {
	       	    var err = textStatus + ", " + error;
	       	    console.log( "Extract JSON from categories error: " + err );
	     });   	 
								
		 map = new google.maps.Map(document.getElementById('map-canvas'),
					mapOptions);	

		  var reportDataURL = //"https://code.google.com/p/athena-json/source/browse/trunk/izmir-earthquake-scenario-reports.json";   
			// "/json/userData.json";	
			// "/json/userDataSingleTest.json"	
			"/json/izmir-earthquake-scenario-reports.json";
			
		  jQuery.getJSON(reportDataURL,						
		    function(data) {
    
			  jQuery.each(data, function(key, val) {

				 if (jQuery('#val1').is(':checked') && val.validationStatus!=1 )
					 return true;
				 if (jQuery('#val0').is(':checked') && val.validationStatus!=0 )
					 return true;
				 if (jQuery('#val-1').is(':checked') && val.validationStatus!=-1 )
					 return true;
				 
				 if (jQuery('#read').is(':checked') && Boolean(!val.reportRead))
					 return true;
				 
				 if ( jQuery('#priority').val()=="p1"  && ! (val.priorityLevel==1) )
                      return true;
				 if ( jQuery('#priority').val()=="p12"  && ! (val.priorityLevel==1 || val.priorityLevel==2) )
                     return true;						 					
											
				var reportLatlng = new google.maps.LatLng(
										val.reportLocation.lat,
									    val.reportLocation.lng);      	    
			    var pinIcon;
                switch(val.reportCategoryID){
                case 1:
                	 pinIcon= natural_disaster_red_pin;
                    break;
                case 2: 
                    pinIcon= fire_red_pin;
                    break;
                case 7: 
                    pinIcon= infrastructure_red_pin;
                    break;
                case 9: 
                    pinIcon= transport_red_pin;
                    break;                
                case 10: 
                    pinIcon= medical_red_pin;
                    break;         
                               
                 default:
                     pinIcon=red_pin;
                }

				var hrefLink, imageTag, imageLink;
				if (Boolean(val.media.reportImages[0])) {
					hrefLink= '<a href= "' + val.media.reportImages[0].url + '" target="_blank">  link to image</a>'
					imageTag= 	'<img src="' + val.media.reportImages[0].url + '" alt="image in infowindow" height="52" width="52"    >';
					imageLink = '<a href= "' + val.media.reportImages[0].url +'" target="_blank"> ' + imageTag + '</a>';
				}
				else {
					imageLink = "";
					hrefLink = "no image available"
					imageTag = "";
				};

				//var datePosted = new Date(Date.parse(val.reportTimestamp, "Y-m-d") );
         
				jQuery
				.ajax({
					type : "POST",
					url : "/timeSince.groovy",
					cache : false,
					data : "time=" + val.reportTimestamp,
					success : function(timeSince) {
						//console.log(" in ajax success timesince " + timeSince);
			
						var infoString = '<div style="color:blue;"> Report Category: '
							        			+ categories[val.reportCategoryID]  
							        			+'</div><div> Report Title: ' + val.reportTitle 
							        			+ '</div><div style="color:black;"> Report Text: '
							        			+ val.reportText  					        			
												+ '</div><div class="levels"> Credibility Level: '
												+ val.credibilityLevel
											    + '</div><div class="levels"> Priority Level: '
												+ val.priorityLevel 
											    + '</div><div> Report read: '
												+ val.reportRead 	
												+ '</div>Validation status: ' + val.validationStatus +  '</br>'
												+ 'Time since report posted: ' +timeSince + '</br>'
		                                        + imageLink + hrefLink;
					
						var infowindow = new google.maps.InfoWindow(
													{content : infoString});
						var titleString = 'Report Category:' + val.reportCategory;
						var marker2 = new google.maps.Marker({
			   		    					position : reportLatlng,
				     						map : map,
										    icon : pinIcon,
											title : titleString
											});
						google.maps.event.addListener(marker2, 'click',
							function() {
							           infowindow.open(map, marker2);
								   	});
						
					},
					error : function(jqXHR, textStatus, errorThrown) {					
						alert("error in time ajax" + textStatus + " errorThrown is: "
								+ errorThrown);
					}
				});
			  });
			  
			}).fail(function(jqxhr, textStatus, error) {
						var err = textStatus + ", " + error;
						console.log("getJSON Request Failed in draw map: " + err);
			});
		};
  </script>

<style>
#map-canvas {
	width: 800px;
	height: 700px;
	clear: both;
}
 
 #priority, #valid, #read, .fl  {
 float:left;
 padding-left: 5px;
 padding-right:5px;
 }
 
 .levels {
 color:green;
 }
 
 h1{
 color:blue;

 }
body {
	font-family: arial; 
	font-size: 12px; 
}
</style>    

</head>
<title>Athena</title>
<link rel="shortcut icon" href="images/athena-favicon.ico">
<body>
<h1>  <img  src="images/athena.png" alt="athena logo" height="30" width="40" title="ATHENA project">
	Command and Control Centre Intelligence Dashboard (CCCID) </h1>

<label class="fl" for="priority">Priority level: </label><select  id="priority" title="select priority level of reports to display"> 
   <option value="p1" >High</option>
   <option value="p12">High + Med</option>
   <option value="p13" selected="selected" >All</option>
</select>

 <div id="valid">
    <input type="radio" id="val1" name="radio" ><label for="val1" title="Show only validated reports">Validated</label>
    <input type="radio" id="val0" name="radio" checked="checked"><label for="val0" title="Show only unvalidated reports">Unvalidated</label>
    <input type="radio" id="val-1" name="radio"><label for="val-1" title="Show only rejected reports">Rejected</label>
  </div>
 
<input type="checkbox" id="read"><label for="read" title="Select to see only reports that have benn read">Read</label> 

  <div id="map-canvas"></div>
  <footer>
  <details>
<summary>About ATHENA</summary>
The ATHENA project brings together major user communities with world leading experts in crisis management
and experts and technology developers of mobile and social media use and development..
</details>
</footer>
</body>
<script>drawMap()</script>

  <script> 
   jQuery( "#valid" ).buttonset();
  
   jQuery('#valid, #read, #priority, #vr').bind('change', function(){
	     drawMap();	
	});    
  </script>
</html>